<template>
  <div style="padding: 20px">
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="ov-title">
          <strong>预报总览</strong>
          <div>
            <el-button type="primary" size="small" plain>最新一年</el-button>
            <el-button type="primary" size="small">最新一月</el-button>
          </div>
        </div>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="yb-box" style="background-color: #fff8f4">
              <div class="yb-title" style="color: #c04800;background-color: #ffd8c1">区属</div>
              <div class="yb-body">
                <div>
                  <strong style="color:#2167fa">62.86</strong> <span style="color: #666">亿元</span>
                  <strong style="display: block">2024-05月预计产值</strong>
                </div>
                <div>
                  <strong style="color: red">+3.49%</strong>
                  <div>环比上月</div>
                </div>
                <div>
                  <strong style="color:red;">+19.50%</strong>
                  <div>同比去年</div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="yb-box" style="background-color: #f5f8ff">
              <div class="yb-title" style="color: #2d519c;background-color: #c1d5ff">全区</div>
              <div class="yb-body">
                <div>
                  <strong style="color: #2167fa">6.41</strong> <span style="color:#666;">亿元</span>
                  <strong style="display: block">2024-05月预计产值</strong>
                </div>
                <div>
                  <strong style="color: green">-3.49%</strong>
                  <div>环比上月</div>
                </div>
                <div>
                  <strong style="color: red">+17.16%</strong>
                  <div>同比去年</div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="8">
        <div class="ov-title">
          <strong>亮灯总览</strong>
          <div>
            <el-button type="primary" size="small" plain>最新一年</el-button>
            <el-button type="primary" size="small">最新一月</el-button>
          </div>
        </div>
        <div class="yb-box" style="background-color: #f7f8fa">
          <lighting-overview></lighting-overview>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="ov-title">
          <strong>生产经营问卷总览</strong>
          <div>
            <el-button type="primary" size="small" plain>最新一年</el-button>
            <el-button type="primary" size="small">最新一月</el-button>
          </div>
        </div>
        <div class="yb-box">
          <ul class="ov-list">
            <template v-for="item in questionnaireList">
              <li>
                <div>
                  {{ item.year }} - {{ item.month }}月{{ item.title }} <strong
                    style="color: #0b63b7">{{ item.total }}</strong> <small style="color: #666666">{{ item.unit }}
                  {{ item.type ? `(${item.type})` : '' }}</small>

                </div>
                <div>
                  同比去年{{ item.rate > 0 ? '上涨' : '下降' }} <span
                    :style="{color:item.rate>0?'red':'green'}">{{ item.rate }}%</span>
                </div>
              </li>
            </template>
          </ul>
        </div>
      </el-col>
    </el-row>
    <br>
    <div class="ov-title">
      <strong>态势分布</strong>
      <div>
        <el-button type="primary" size="small" plain>最新一年</el-button>
        <el-button type="primary" size="small">最新一月</el-button>
      </div>
    </div>
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="map-box">
          <over-view-map></over-view-map>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="map-box">
          <el-table :data="areaList" height="500px" :header-cell-style="{ background: '#f4f6f8', color: '#000000' }">
            <el-table-column prop="deptName" label="区域" width="180"/>
            <el-table-column prop="plan" label="预计产值 " width="180"/>
            <el-table-column prop="yearRate" label="同比">
              <template #default="scope">
                <span
                    :style="{color:scope.row.yearRate>0?'red':'green'}">{{
                    (scope.row.yearRate * 100).toFixed(2)
                  }}%</span>
              </template>
            </el-table-column>
            <el-table-column prop="monthRate" label="环比">
              <template #default="scope">
                <span
                    :style="{color:scope.row.monthRate>0?'red':'green'}"> {{
                    (scope.row.monthRate * 100).toFixed(2)
                  }}%</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
  <br>
  <div style="padding: 20px">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="jc-box">
          <div class="ov-title">
            <strong>企业开工监测</strong>
          </div>
          <div class="jc-echart">
            <enterprise-commencement></enterprise-commencement>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="jc-box">
          <div class="ov-title">
            <strong>企业注销监测</strong>
          </div>
          <div class="jc-echart">
            <enterprise-deregistration></enterprise-deregistration>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="jc-box">
          <div class="ov-title">
            <strong>工商变更监测</strong>
          </div>
          <div class="jc-echart">
            <business-change></business-change>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="jc-box">
          <div class="ov-title">
            <strong>经营风险监测</strong>
          </div>
          <div class="jc-echart">
            <business-risk></business-risk>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
  <div style="height: 100px"></div>
</template>


<script setup>
import {areaList, questionnaireList} from '../data/data.js'
import LightingOverview from "@/views/situationalAwareness/Echarts/lightingOverview.vue";
import OverViewMap from "@/views/situationalAwareness/components/OverViewMap.vue";
import EnterpriseCommencement from "@/views/situationalAwareness/Echarts/enterpriseCommencement.vue";
import EnterpriseDeregistration from "@/views/situationalAwareness/Echarts/enterpriseDeregistration.vue";
import BusinessChange from "@/views/situationalAwareness/Echarts/businessChange.vue";
import BusinessRisk from "@/views/situationalAwareness/Echarts/businessRisk.vue";
</script>


<style scoped lang="scss">
.map-box {
  height: 500px;
  background-color: #efefef;
}

.ov-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  > strong {
    font-size: 16px;
    border-left: 4px solid #1e87f0;
    padding-left: 10px;
  }
}

.yb-box {
  height: 350px;

  .yb-title {
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-weight: bold;
  }

  .yb-body {
    height: calc(100% - 30px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 30px;

    > div {
      padding: 10px 0;
      border-bottom: 1px solid #cccccc;
    }
  }
}

.ov-list {
  > li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    margin: 10px 0;
    padding: 0 20px;
    border: 1px solid #efefef
  }

  > li:hover {
    background-color: #fafafa;
  }
}

.jc-box {
  height: 280px;

  .jc-echart {
    height: calc(100% - 30px);
  }
}
</style>
